<template>
 <div style="margin: 00px 0px 10px 10px;padding-top: 10px">
  <a-select
      v-model:value="personNow"
      label-in-value
      style="width: 120px; margin-right: 10px"
      :options="persons"
      @change="handleChangePerson"
    ></a-select>
  <a-range-picker v-model:value="date"  @change="onChangeDate" :placeholder="['开始日期', '结束日期']"/>
  
 </div>
 <div id="container"></div>
</template>
<script>
import { request } from "../../utils/request";
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, shallowRef } from "@vue/reactivity";
import { DownOutlined } from "@ant-design/icons-vue";
const persons = []; //所有销售人员
const personNow = ''; //当前人员
const date = '';
const startDate = '';
const endDate = ''; 
const myPath = []; //路径
export default {
  data() {
    return {
      persons,
      personNow,
      date,
      startDate,
      endDate,
      myPath
    };
  },
  mounted() {
    this.getPersons();
    this.init();
  },
  methods: {
    getPersons() {
      request({ 
          url: `/api/track/personlist`,
          method: "get",
        }).then((res)=>{
          this.persons = [];
          res.forEach((e,i) => {
            this.persons.push({
              value: e.id,
              label: e.lastname
            })
          });
          this.personNow = ref({
            value: this.persons[0].value
          })
      })
    },
    getTrackDatas() {
      request({ 
          url: `/api/track/list?id=${this.personNow.value}&startDate=${this.startDate}&endDate=${this.endDate}`,
          method: "get",
        }).then((res)=>{
          this.myPath = [];
          res.forEach((e,i) => {
            this.myPath.push([e.longitude,e.latitude])
          });
      
         this.init();
      })
    },
    init() {
      const that = this;
      var map = new AMap.Map("container", {
        zoom: 4,
      });

      AMapUI.load(
        ["ui/misc/PathSimplifier", "lib/$"],
        function (PathSimplifier, $) {
          if (!PathSimplifier.supportCanvas) {
            alert("当前环境不支持 Canvas！");
            return;
          }

          var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            autoSetFitView: false,
            map: map, //所属的地图实例

            getPath: function (pathData, pathIndex) {
              return pathData.path;
            },
            getHoverTitle: function (pathData, pathIndex, pointIndex) {
              if (pointIndex >= 0) {
                //point
                return (
                  pathData.name +
                  "，点：" +
                  pointIndex +
                  "/" +
                  pathData.path.length
                );
              }

              return pathData.name + "，点数量" + pathData.path.length;
            },
            renderOptions: {
              renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
            },
          });

          window.pathSimplifierIns = pathSimplifierIns;


          var myPath =JSON.parse(JSON.stringify(that.myPath)),
         
            //       var myPath = [
            //     [116.405289, 39.904987],
            //     [113.964458, 40.54664],
            //     [111.47836, 41.135964],
            //     [108.949297, 41.670904],
            //     [106.380111, 42.149509],
            //     [103.774185, 42.56996],
            //     [101.135432, 42.930601],
            //     [98.46826, 43.229964],
            //     [95.777529, 43.466798],
            //     [93.068486, 43.64009],
            //     [90.34669, 43.749086],
            //     [87.61792, 43.793308]
            // ],
           endIdx = 0,
           
          data = [
            {
              name: "动态路线",
              path: myPath.slice(0, 1),
            },
          ];
 console.log(myPath);
          pathSimplifierIns.setData(data);

          //对第一条线路（即索引 0）创建一个巡航器
          var navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: true, //循环播放
            speed: 1000, //巡航速度，单位千米/小时
          });

          function expandPath() {
            function doExpand() {
              endIdx++;

              if (endIdx >= myPath.length) {
                return false;
              }

              var cursor = navg1.getCursor().clone(), //保存巡航器的位置
                status = navg1.getNaviStatus();

              data[0].path = myPath.slice(0, endIdx + 1);
              pathSimplifierIns.setData(data); //延展路径

              //重新建立一个巡航器
              navg1 = pathSimplifierIns.createPathNavigator(0, {
                //loop: true, //循环播放
                speed: 600000, //巡航速度，单位千米/小时
              });

              if (status !== "stop") {
                navg1.start();
              }

              //恢复巡航器的位置
              if (cursor.idx >= 0) {
                navg1.moveToPoint(cursor.idx, cursor.tail);
              }

              return true;
            }

            if (doExpand()) {
              setTimeout(expandPath, 1000);
            }
          }

          navg1.start();

          expandPath();
        }
      );
    },
    handleChangePerson(e) {
      this.personNow = ref({
          value:e.value
      })
    },
    onChangeDate(value, dateString) {
      this.startDate = dateString[0];
      this.endDate = dateString[1];
      this.getTrackDatas();
    }
  },
  components: {
    DownOutlined,
  },
};
</script>
<style  scoped>
#container {
  padding: 20px;
  width: 100%;
  height: calc(100vh - 80px);
 
}
</style>